<template>
  <div>
    <h1>插槽的使用示例</h1>
    <p>
      <!-- 未传递插槽内容的默认状态 -->
      <WangButton />
      <!-- 传递自定义内容替换插槽 -->
      <WangButton>点一下看看</WangButton>
      <!-- 具名插槽示例： 默认状态 -->
      <WangIconButton />
      <!-- 具名插槽示例： 传入icon slot -->
      <WangIconButton>
        <template v-slot:icon>🚚</template>
        <!-- <div v-slot:icon>🚚</div> -->
        替换了icon
        <!-- 这是一个未被带v-slot template包裹的元素 -->
        <span>@</span>
      </WangIconButton>
    </p>

    <p>
      <todo-list v-bind:todos="todos">
        <template v-slot:todo="slotProps">
          <span v-if="slotProps.todo.isComplete">✓</span>
          {{ slotProps.todo.text }}
        </template>
        <!-- <template v-slot:todo="{ todo }">
          <span v-if="todo.isComplete">✓</span>
          {{ todo.text }}
        </template> -->
      </todo-list>
    </p>
  </div>
</template>

<script>
import WangButton from '@/components/WangButton.vue';
import WangIconButton from '@/components/WangIconButton.vue';
import TodoList from '@/components/TodoList.vue';

export default {
  components: {
    WangButton,
    WangIconButton,
    TodoList,
  },
  data() {
    return {
      todos: [
        {
          id: 1,
          text: '吃饭',
          isComplete: true,
        },
        {
          id: 2,
          text: '睡觉',
          isComplete: false,
        },
        {
          id: 3,
          text: '打豆豆',
          isComplete: false,
        },
      ],
    };
  },
}
</script>

<style>

</style>